<template>
  <div class="page">

    <!-- 头部 开始 -->
    <div class="banner">
      <div class="left_icon" @click="goBack">
        <img src="@/assets/images/back.png" alt="">
      </div>
      <div class="right_icon">
        <!-- <img src="@/assets/images/right_icon.png" alt=""> -->
      </div>
    </div>
    <!-- 头部 end -->

    <!-- 医生信息 开始 -->
    <div class="doctor_info">

      <!-- 关注 开始 -->
      <div class="attention" :class="oInfo.followedStatus == 1 ? 'attentioned' : ''" @click="attention">
        <img src="@/assets/images/guanzhu.png" class="img" alt="" v-if="oInfo.followedStatus == 2">
        <span>{{ oInfo.followedStatus == 2 ? '关注' : '已关注' }}</span>
      </div>
      <!-- 关注 end -->

      <!-- 医院头像 开始 -->
      <div class="avatar">
        <li-image :src="oInfo.photo" round class="img" v-if="oInfo.photo"></li-image>
        <img src="@/assets/images/avatar/doctor_circle.png" class="img" alt="" v-else>
        <img src="@/assets/images/rz.png" class="rz" alt="" v-if="oInfo.hasCertified == 1">
      </div>
      <!-- 医院头像 end -->

      <!-- 医院名称 开始 -->
      <div class="head">
        <h2 class="h2">{{ oInfo.name }}</h2>
        <span class="post">{{ oInfo.personalTitle }}</span>
        <nuxt-link :to="`/inquire/doctor/${oInfo.qualificationId}`" v-if="oInfo.qualificationId">
          <img src="@/assets/images/zizhi.png" class="zh" alt="查看资质">
        </nuxt-link>
      </div>
      <!-- 医院名称 end -->

      <!-- 坐诊 开始 -->
      <div class="address">
        坐诊：{{ oInfo.hospitalName }}
      </div>
      <!-- 坐诊 end -->

      <!-- 擅长 开始 -->
      <div class="skill">
        <img src="@/assets/images/skill.png" class="img" alt="">
        <div class="txt">{{ oInfo.expertProjectNames }}</div>
      </div>
      <!-- 擅长 end -->

      <!-- 评分 开始 -->
      <div class="score_box">
        <img src="@/assets/images/star.png" alt="">
        <span class="num">{{ oInfo.initScore||'' }}</span>
        <span class="line">/</span>
        <span class="tips">患者评论</span>
        <span class="num">{{ oInfo.commentCnt||0 }}</span>
        <span class="line">/</span>
        <span class="tips">从业年限</span>
        <span class="num">{{ oInfo.workYears||'' }}</span>
      </div>
      <!-- 评分 end -->

    </div>
    <!-- 医生信息 end -->

    <!-- 医生简介 开始 -->
    <div class="introduction">
      <div class="head">个人介绍</div>
      <div class="content" v-html="oInfo.introduce">
      </div>
    </div>
    <!-- 医生简介 end -->

    <!-- 菜单 开始 -->
    <div class="menu_box">
      <div class="cell" :class="menuActive == item.id ? 'cell_active' : ''" v-for="(item, index) in menus" :key="index"
        @click="menuEvent(item)">{{ item.name }}</div>
    </div>
    <!-- 菜单 end -->

    <!-- 评论列表 开始 -->
    <div class="evaluate_list" v-if="menuActive == 1">
      <div class="head">
        <div class="left">
          <span class="num">{{ totalScore.scoreOverall ? totalScore.scoreOverall.toFixed(1) : '' }}</span>
          <span class="unit">分</span>
          <span class="good">{{ showRateText(totalScore.scoreOverall) }}</span>
          <span class="sp">{{ commentList ? commentList.length : '' }}条</span>
          <span class="lili_divider"></span>
          <span class="sp_01">专业{{ totalScore.scoreProfessional ? totalScore.scoreProfessional.toFixed(1) : '' }}</span>
          <span class="sp_01">服务{{ totalScore.scoreService ? totalScore.scoreService.toFixed(1) : '' }}</span>
          <span class="sp_01">环境{{ totalScore.scoreSurroundings ? totalScore.scoreSurroundings.toFixed(1) : '' }}</span>
        </div>
        <div class="right">
          <nuxt-link :to="`/hospital/evaluate/${doctorId}?source=doctor`"><img src="@/assets/images/arrow_right.png" class="img" alt=""></nuxt-link>
        </div>
      </div>
      <UserEvaluate v-for="(item, index) in commentList" :key="index" :info="item"></UserEvaluate>
    </div>
    <!-- 评论列表 end -->

    <!-- 案例列表 开始 -->
    <div class="case_list" v-if="menuActive == 2">
      <template v-if="caseList && caseList.length">
        <UserCase v-for="(item, index) in caseList" :key="index" :info="item"></UserCase>
      </template>
      <no-data v-else></no-data>
    </div>
    <!-- 案例列表 end -->

    <!-- 悬浮按钮 开始 -->
    <fixed-menu source="doctor" :id="doctorId" :hospitalId="oInfo.hospitalId"></fixed-menu>
    <!-- 悬浮按钮 end -->

  </div>
</template>
<script>
import UserEvaluate from "@/components/evaluate/index.vue";
import UserCase from "@/components/case/index.vue";
import { showRateText } from '@/utils/utils'
import {
  GET_DOCTOR_INFO,
  FOLLOWED_DOCTOR_INFO,
  GET_DOCTOR_USERCOMMENTS,
  GET_DOCTOR_USERCASES,
} from "@/http/interface";
export default {
  components: {
    UserEvaluate,
    UserCase,
  },
  data() {
    return {
      menus: [
        { name: "评论", id: 1 },
        { name: "案例", id: 2 },
      ],
      menuActive: 1,
      oInfo: {},
      title: "",
      description: "",
      keywords: "",
      doctorId: "",
      commentList: [],
      caseList: [],
      totalScore: {},
      showRateText: (str) => { return showRateText(str) }
    };
  },
  head() {
    return {
      title: this.title,
      meta: [
        {
          hid: "description",
          name: "description",
          content: this.description,
        },
        {
          hid: "Keywords",
          name: "Keywords",
          content: this.keywords,
        },
      ],
      link:[
        {ref:'canonical',href:`${this.$domain}/doctor/${this.doctorId}`}
      ]
    };
  },
  async asyncData({ query, $axios,params }) {
    let _params = { id: params.id };
    let res = await $axios.get(GET_DOCTOR_INFO, { params: _params });
    let oInfo = res.data || {};

    // 用户评价
    let bes = await $axios.get(GET_DOCTOR_USERCOMMENTS, { params: _params });
    console.log(bes);
    let obj = bes.data || {};
    let commentList = obj.list || [];
    let totalScore = obj.summary || {};

    // 案例
    let ces = await $axios.get(GET_DOCTOR_USERCASES, { params: _params });
    let caseList = ces.data || [];
    console.log(ces);

    console.log(oInfo);
    return {
      doctorId: params.id,
      oInfo,
      title: oInfo.seoTitle,
      keywords: oInfo.seoKeywords,
      description: oInfo.seoDescription,
      commentList,
      caseList,
      totalScore
    };
  },
  methods: {
    //菜单点击事件
    menuEvent(row) {
      this.menuActive = row.id;
    },

    // 返回上一页
    goBack() {
      this.$router.go("-1");
    },

    // 关注
    async attention() {
      let token = this.$cookies.get("token");
      if (!token) {
        this.$router.push({
          path: "/my/login",
        });
        return false;
      }
      let _status = this.oInfo.followedStatus;
      let id = this.doctorId;
      let params = { id: id };
      let res = await this.$axios.get(FOLLOWED_DOCTOR_INFO, { params: params });
      if (res.code == 200) {
        this.$set(this.oInfo, "followedStatus", _status == 1 ? 2 : 1);
      }
    },


  },
};
</script>
<style lang="less" scoped>@import "/assets/styles/doctor/detail.less";</style>